<template>
	<el-dialog
		:close-on-click-modal="false"
		:title="title"
		:visible.sync="dialogVisible"
		width="30%"
	>
		<div>
			<slot></slot>
		</div>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible = false">取 消</el-button>
			<el-button type="primary" @click="enter">确 定</el-button>
		</span>
	</el-dialog>
</template>

<script>
export default {
	data() {
		return {
			dialogVisible: false,
		}
	},
	props: {
		title: {
			type: String,
			default: '标题',
		},
		visible: {
			type: Boolean,
			default: false,
		},
	},
	watch: {
		// watch早期有bug，互相引用，进入死循环
		visible(val) {
			this.dialogVisible = val
		},
		dialogVisible(val) {
			this.$emit('update:visible', val)
		},
	},
	methods: {
		enter() {
			this.dialogVisible = false
			this.$emit('enter')
		},
	},
}
</script>

<style>
</style>